@extends('index.common.framework') 
@section('head')
<style>
    img{
        width: 100%;
    }
</style>
@endsection
@section('content')
<header>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            @for ($i = 0; $i < count($sliders); $i++)
                @if ($i == 0)
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                @else
                <li data-target="#carouselExampleIndicators" data-slide-to="{{$i}}"></li>
                @endif
            @endfor
        </ol>
        <div class="carousel-inner" role="listbox">
            <!-- Slide One - Set the background image for this slide in the line below -->
            @foreach( $sliders as $index => $slider)
                @if($index === 0)
                <div class="carousel-item active" style="background-image: url('{{env("APP_UPLOAD").$slider["img"]}}')">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>{{ $slider['title'] }}</h3>
                        <p>{{ $slider['intro'] }}</p>
                    </div>
                </div>
                @else
                <div class="carousel-item" style="background-image: url('{{env("APP_UPLOAD").$slider["img"]}}')">
                    <div class="carousel-caption d-none d-md-block">
                        <h3>{{ $slider['title'] }}</h3>
                        <p>{{ $slider['intro'] }}</p>
                    </div>
                </div>
                @endif
            @endforeach
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
    </div>
</header>
<!-- Page Content -->
<div class="container">
    <!-- Page Heading/Breadcrumbs -->
    <h1 class="mt-4 mb-3">简介
    </h1>
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('home')}}">主页</a>
        </li>
        <li class="breadcrumb-item active">简介</li>
    </ol>
    <!-- Intro Content -->
    <div class="row">
        <div class="col-lg-6">
            <img class="img-fluid rounded mb-4" src="{{env('CLOUND_UPLOAD')}}20180328/0ybf8O8lQ4WiBy2efB8qAxCzSTd8XILaeoy9vOFZ.jpeg" alt="">
        </div>
        <div class="col-lg-6">
            <h2>系统简介</h2>
            <p>本系统使用时下流行的建站方案。运用PHP（Hypertext Preprocessor）作为服务端的程序语言，并选用了Laravel5.5开源框架快速搭建后端服务。数据库软件为MySQL5.6，前端所应用的技术也是已成规范的HTML+CSS+JAVASCRIPT，并使用了jQuery库来简化部分操作。由于运用这样一种跨平台的设计方案，本系统的开发和测试环境为Windows，线上运行环境为Linux。</p>
        </div>
    </div>
    <!-- /.row -->
    <!-- Team Members -->
    <h2>应用技术</h2>
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="index.html">主页</a>
        </li>
        <li class="breadcrumb-item active">应用技术</li>
    </ol>
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card h-100 text-center">
                <img class="card-img-top" src="{{env('CLOUND_UPLOAD')}}20180329/KENZ1Fif0BeLGXqzpNw4lHfAP8L2GRq0BP9druQp.jpeg" alt="">
                <div class="card-body">
                    <h4 class="card-title">jQuery</h4>
                    <h6 class="card-subtitle mb-2 text-muted">快速、简洁的JavaScript框架</h6>
                    <p class="card-text">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器</p>
                </div>
                <div class="card-footer">
                    <a href="#">296337052@qq.com</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card h-100 text-center">
                <img class="card-img-top" src="{{env('CLOUND_UPLOAD')}}20180329/wSKpFUshoGMJ5xVmkMlQWFP8eEjVmyeLGjDb1cA9.jpeg" alt="">
                <div class="card-body">
                    <h4 class="card-title">Ajax</h4>
                    <h6 class="card-subtitle mb-2 text-muted">Async Javascript And Xml</h6>
                    <p class="card-text">Ajax即 Async javascript and xml,是指一种创建交互式网站应用的网页开发技术，也是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
                        </p>
                </div>
                <div class="card-footer">
                    <a href="#">296337052@qq.com</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card h-100 text-center">
                <img class="card-img-top" src="{{env('CLOUND_UPLOAD')}}20180329/OCI66uob3lXDCrOFHom39hweCVst5CeJtyC3Bcot.jpeg" alt="">
                <div class="card-body">
                    <h4 class="card-title">Redis</h4>
                    <h6 class="card-subtitle mb-2 text-muted">高性能的key-value数据库</h6>
                    <p class="card-text">Redis 是完全开源免费的，遵守BSD协议，是一个高性能的key-value数据库。Redis 与其他 key - value 缓存产品有以下三个特点：支持数据的持久化，可以将内存中的数据保存在磁盘中，重启的时候可以再次加载进行使用。不仅仅支持简单的key-value类型的数据，同时还提供list，set，zset，hash等数据结构的存储。支持数据的备份，即master-slave模式的数据备份。</p>
                </div>
                <div class="card-footer">
                    <a href="#">296337052@qq.com</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
    <!-- Our Customers -->
    {{--  <h2>客户案例</h2>
    <div class="row">
        <div class="col-lg-2 col-sm-4 mb-4">
            <img class="img-fluid" src="http://placehold.it/500x300" alt="">
        </div>
        <div class="col-lg-2 col-sm-4 mb-4">
            <img class="img-fluid" src="http://placehold.it/500x300" alt="">
        </div>
        <div class="col-lg-2 col-sm-4 mb-4">
            <img class="img-fluid" src="http://placehold.it/500x300" alt="">
        </div>
        <div class="col-lg-2 col-sm-4 mb-4">
            <img class="img-fluid" src="http://placehold.it/500x300" alt="">
        </div>
        <div class="col-lg-2 col-sm-4 mb-4">
            <img class="img-fluid" src="http://placehold.it/500x300" alt="">
        </div>
        <div class="col-lg-2 col-sm-4 mb-4">
            <img class="img-fluid" src="http://placehold.it/500x300" alt="">
        </div>
    </div>  --}}
    <!-- /.row -->
</div>
<!-- Page Content -->
<div class="container">
    <!-- Page Heading/Breadcrumbs -->
    <h1 class="mt-4 mb-3">应用技术
    </h1>
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="index.html">主页</a>
        </li>
        <li class="breadcrumb-item active">应用技术</li>
    </ol>
    <!-- Image Header -->
    <img class="img-fluid rounded mb-4" src="{{env('CLOUND_UPLOAD')}}20180331/RXOMXPf1WtHVNI3sig0Rcv4SQtcV0yew2aMmdZVD.jpeg" alt="">
    <!-- Marketing Icons Section -->
    <div class="row">
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <h4 class="card-header">Laravel</h4>
                <div class="card-body">
                    <p class="card-text">Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <h4 class="card-header">MySQL</h4>
                <div class="card-body">
                    <p class="card-text">MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card h-100">
                <h4 class="card-header">Node.js</h4>
                <div class="card-body">
                    <p class="card-text">Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->
@endsection